<template>
  <view class="home">
    <z-paging ref="paging" style="background-color: #fff;" v-model="dataList" :auto="false" @query="queryList">
      <block slot="top">
        <image class="homeBg" src="../../static/images/mineBg.png" mode=""></image>
        <view style="width: 100%;height: 112rpx;"></view>
        <view class="header">
          <uv-search disabled @click="toSearch" class="searchIpt" :showAction="false" :clearabled="true"
            bgColor="#fff"></uv-search>
          <view class="banner">
            <!-- <image class="banner-img" src="../../static/images/banner.png" mode=""></image> -->
            <uv-swiper indicatorActiveColor="#fff" :indicator="true"  height="300rpx" :list="bannerList"></uv-swiper>
          </view>
          <view class="recommend">
            <image class="recommend-img" src="../../static/images/reconmendHome.png" mode=""></image>
          </view>
        </view>
      </block>
      <view class="recommend-menu">
        <view class="recommend-list" v-for="(item, index) in dataList" :key="index" @click="toGoodsDetail(item)">
          <image class="img" :src="item.image" mode=""></image>
          <view class="info">
            <view class="title text-ellipsis">
              {{item.store_name}}
            </view>
            <view class="label text-ellipsis">
              <text class="txt" style="margin-bottom: 15rpx;" v-for="(item, index) in item.labels">{{item}}</text>
            </view>
            <view class="footer">
              <view class="footer-item" style="width: 17%;">
                <view class="unit">单位</view>
                <view class="valResult">{{item.unit_name}}</view>
              </view>
              <view class="footer-item" style="width: 23%;">
                <view class="unit">库存</view>
                <view class="valResult">{{item.stock}}</view>
              </view>
              <view class="footer-item" style="width: 30%;">
                <view class="unit">采购价</view>
                <view class="valResult">￥{{item.price}}</view>
              </view>
              <view class="footer-item" style="width: 30%;">
                <view class="unit">批量售价</view>
                <view class="valResult">￥{{item.ot_price}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        params: {
          page: 1,
          limit: 10
        },
        goodsList: [],
        dataList: [],
        bannerList: []
      }
    },
    // onShow() {
    //   this.$nextTick(() => {
    //     this.$refs.paging.reload();
    //   })
    // },
    onLoad() {
      this.homeData();
      this.$nextTick(() => {
        this.$refs.paging.reload();
      })
    },
    methods: {
      queryList(pageNo, pageSize) {
        this.params.page = pageNo;
        this.params.limit = pageSize;
        // 此处请求仅为演示，请替换为自己项目中的请求
        reqApi.hotGoods(this.params).then(res => {
          console.log("返回的结果", res);
          // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
          this.$refs.paging.complete(res.data.list);
        })
      },
      // 首页数据
      homeData() {
        reqApi.homeData({}).then(res => {
          console.log("首页基础数据", res);
          this.bannerList = res.data.banner.map(v => v.pic);
        })
      },
      toGoodsDetail(item) {
        uni.navigateTo({
          url: `/pages/home/goodDetail?id=${item.product_id}`
        })
      },
      toSearch() {
        uni.navigateTo({
          url: "/pages/home/search"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .recommend-menu {
    padding: 0 30rpx;
    box-sizing: border-box;

    .recommend-list {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0;
      box-sizing: border-box;
      border-bottom: 2rpx solid #eee;

      .img {
        width: 180rpx;
        height: 180rpx;
        margin-right: 18rpx;
      }

      .info {
        flex: 1;

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #222222;
        }

        .label {
          margin: 12rpx 0 16rpx 0;
          display: flex;
          flex-wrap: wrap;
          height: 48rpx;

          .txt {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #EEA800;
            border-radius: 8rpx;
            border: 2rpx solid #EEA800;
            padding: 0 16rpx;
            box-sizing: border-box;
            margin-right: 15rpx;
            height: 34rpx;
            display: flex;
            align-items: center;
          }
        }

        .footer {
          display: flex;

          .footer-item:first-child {
            padding-left: 0 !important;
          }

          .footer-item:last-child {
            padding-right: 0 !important;
            border-right: 0;
          }

          .footer-item {
            padding: 0 28rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-right: 2rpx solid #eee;
            line-height: 30rpx;
            .unit {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
            }

            .valResult {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #222222;
            }
          }
        }
      }

    }
  }

  .home {
    position: relative;

    .homeBg {
      width: 100%;
      height: 396rpx;
      position: absolute;
      left: 0;
      top: 0;
    }

    .header {
      padding: 0 30rpx;
      box-sizing: border-box;
      background: #fff;

      .searchIpt {
        width: 100%;
      }

      .recommend {
        display: flex;
        justify-content: center;
        margin-top: 30rpx;

        .recommend-img {
          width: 100%;
          height: 68rpx;
        }
      }

      .banner {
        margin-top: 20rpx;

        .banner-img {
          width: 100%;
          height: 260rpx;
        }
      }
    }
  }
</style>